<template>
	<view class="margin-15">
		<view class="bg-ffffff padded-5 border-radius-5 padded-l-15 padded-r-15 color-646D7F">
			<view class="form-group ">
			    <view class="label">筛选</view>
				<view class="value">
					<uni-datetime-picker 
					  type="daterange"
					  :value="dateRange"
					  :start="startDate"
					  :end="endDate"
					  :key="pickerKey"
					  @change="onDateChange"
					/>
				</view>
			</view>
		</view>
		<view @click="detail(item.id)" class="bg-ffffff padded-15 border-radius-10 margin-t-15 uni-relative" v-for="(item,index) in list">
			<view class="text-18 color-2C3340 ">{{item.title}}</view>
			<view class="notice-dot bg-F54966" v-if="item.is_read==0"></view>
			<view class="notice-content color-646D7F">
				<view v-html="item.jianjie"></view>
			</view>
			<view class="form-group color-B1B8C7">
			    <view class="label">{{item.author}}</view>
				<view class="value">{{item.release_at}}</view>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateRange:'',
				startDate:'',
				endDate:'',
				list:[],
				pickerKey: 0
			}
		},
		onShow() {
			this.index()
		},
		methods: {
			onDateChange(e) {
			  if(e&&e.length!=0){
					this.startDate = e[0]
					this.endDate = e[1]
					this.dateRange = e[0]+' - '+e[1]
					this.index()
			  }else{
					this.startDate = ''
					this.endDate = ''
					this.dateRange = ''
					this.pickerKey = this.pickerKey+1;
					this.index()
			  }
			},
			index(){
				var that = this
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/message_list', // 请求地址
					data:{dateRange:that.dateRange,mid:localStorage.getItem('mid')},
					method:'POST',
				    success: (res) => {
				        // 请求成功的回调函数
				        that.list = res.data
						
					},
				})
			},
			detail(id){
				uni.navigateTo({
					url:'/pages/index/notice_details?id='+id
				})
			}
		}
	}
</script>

<style>
	.notice-dot{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 8px;
		height: 8px;
		border-radius:20px;
	}
	.notice-content{
		margin-top: 20px;
		margin-bottom: 10px;
		display: -webkit-box;          /* 关键属性：弹性伸缩盒子 */
	    -webkit-box-orient: vertical;  /* 垂直排列 */
	    -webkit-line-clamp: 3;         /* 限制显示行数 */
	    overflow: hidden;              /* 隐藏超出部分 */
	    text-overflow: ellipsis;       /* 超出显示省略号 */
	}
	.form-group {
	  display: flex;
	  padding: 5px 0;
	  justify-content: space-between;
	}
</style>
